import * as THREE from 'three';
const createFlame = function (){
//纹理贴图加载器TextureLoader
const texLoader = new THREE.TextureLoader();
const texture = texLoader.load(require('./火焰.png'));
const w = 25 //火焰的宽度
const h = 1.6 * w//火焰高度
var num = 15; //火焰多少帧图
// .repeat方法设置uv两个方向纹理重复数量 
texture.repeat.set(1 / num, 1);// 1/num：从图像上截图一帧火焰
// texture.offset.x = 1/ num
const geometry = new THREE.PlaneGeometry(w, h); 
const material = new THREE.MeshLambertMaterial({
    map: texture,
    transparent: true,
    opacity: 0.4,//整体调节透明度 和三维场景相融合
    side: THREE.DoubleSide, //双面可见
    depthWrite: false,//是否对深度缓冲区有任何的影响
});
geometry.translate(0,h/2,0)
const mesh = new THREE.Mesh(geometry,material)
const flame = new THREE.Group()
flame.add(mesh,mesh.clone().rotateY(Math.PI / 2), mesh.clone().rotateY(Math.PI / 4), mesh.clone().rotateY(Math.PI / 4 * 3))
var t = 0
var stopAnimationFrame = null
function UpdateLoop (){
    t += 0.2
    if(t>15){
        t=0
    }
    texture.offset.x = Math.floor(t)/num
    // 动画帧的名称
    stopAnimationFrame =  window.requestAnimationFrame(UpdateLoop)
}
UpdateLoop()
// 调用stop方法，停止动画帧
flame.stop = function(){
    // 根据动画帧的名称清除
    window.cancelAnimationFrame(stopAnimationFrame)
}
return flame
}

export {createFlame}